<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <link href="css/StileSito.css" type="text/css" rel="stylesheet" />
        <title>Catalogo</title>
        <ui:include src="Header.xhtml"/>
    </h:head>
    <h:body>
        <h:form>
            <p:layout style="min-width:450px;min-height:500px;">
                <p:layoutUnit position="west" resizable="true" size="270" minSize="40" maxSize="300">
                    <p:menu id="menuMarche">
                        <p:submenu label="Marche">
                            <c:forEach items="#{dataMenuBean.getMarche(param['idCategoria'])}" var="m">
                                <p:menuitem value="#{m.nome}"  outcome="CatalogoProdotti.jsf"> 
                                    <f:param name="idCategoria" value="#{param['idCategoria']}"/>
                                    <f:param name="idMarca" value="#{m.id}"/>
                                </p:menuitem>
                            </c:forEach>

                        </p:submenu>
                    </p:menu>
                </p:layoutUnit>

                <p:layoutUnit position="center" resizable="true" maxSize="800" minSize="2000" >

                    <p:dataScroller id="listaProdotti" value="#{dataMenuBean.getProdottoMarcaCatagoria()}" var="prodotto">
                        <f:facet name="header">
                            Catalogo Prodotti
                        </f:facet>

                        <h:panelGrid columns="2"  style="width:100%;border-style: solid;border-color: gray;border-width: thin">
                            <p:graphicImage url="#{prodotto.foto}" width="200" styleClass="bordino"  />
                            <p:outputPanel>
                                <h:panelGrid columns="2" cellpadding="5" >
                                    <h:outputText value="Codice Prodotto:" />
                                    <h:outputText value="#{prodotto.id}" style="font-weight: bold;text-align: center"/>

                                    <h:outputText value="Modello:" />
                                    <h:outputText value="#{prodotto.nome}" style="font-weight: bold;text-align: center"/>

                                    <h:outputText value="Quantità:" />
                                    <h:outputText value="#{prodotto.quantita}" style="font-weight: bold;text-align: center"/>

                                    <h:outputText value="Prezzo:" />
                                    <h:outputText value="#{prodotto.prezzo}€" style="font-weight: bold;text-align: center"/>
                                </h:panelGrid>
                            </p:outputPanel>
                            <p:button outcome="DescrizioneProdotto?idProdotto=#{prodotto.id}" value="Descrizione" style="margin-right: 10px" />

                        </h:panelGrid>


                    </p:dataScroller> 
                </p:layoutUnit>
            </p:layout>
        </h:form>
        <ui:include src="Footer.xhtml"/>  
    </h:body>
</html>

